<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="$refs.tmpRef.show()">添加报表模板</el-button>
      </el-col>
      <el-col :span="1.5" style="float: right;">
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="reportConfigList" height="280" @selection-change="handleSelectionChange">
      <el-table-column label="模板名称" align="center" prop="tmpName"/>
      <el-table-column label="排序序号" align="center" prop="orderNum">
        <template slot-scope="scope">
          <el-input v-model="scope.row.orderNum" @change="changeRow(scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handlePreviwTemp(scope.row)"
          >预览
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['ureport:reportConfig:remove']"
          >移除
          </el-button>
      </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <TableSelect
      ref="tmpRef"
      :listColumns="tmpColumns"
      gridUrl="/baseExportTemp/list"
      @changSelection="tmpSelect"
      dialogWidth="780px"
      title="报表模板字典"
      multiple
    />

  </div>
</template>

<script>

  import {listMixin} from "@/utils/mixins/listMixin";
  import {listReportConfig, delReportConfig, addReportConfig, updateReportConfig} from "@/api/ureport/reportConfig";
  import { previwTemp } from "@/api/ureport/baseExportTemp";
  export default {
    name: "ReportConfig",
    mixins: [listMixin],
    data() {
      return {
        // 报表配置表格数据
        reportConfigList: [],
        // 查询参数
        queryParams: {
          tempId: null,
          reportGroupId: null,
          orderNum: null,
        },
        tmpColumns: [
          {title: '模板名称', key: 'name', type: '', isSearch: true},
          {title: '模板分类', key: 'code', type: 'select', typeCode: 'temp_type', isSearch: true},
          {title: '备注', key: 'remark', type: '', isSearch: false},
        ],
      };
    },
    created() {
      this.getList();
    },
    watch: {
      groupForm() {
        this.getList();
      }
    },
    methods: {
      /** 查询报表配置列表 */
      getList() {
        this.loading = true;
        this.queryParams.reportGroupId = this.groupForm.id || -1
        listReportConfig(this.queryParams).then(response => {
          this.reportConfigList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      tmpSelect(selection) {
        let maxLength = this.reportConfigList.length
        if (selection.length > 0) {
          let reportConfigs = []
          for (let i in selection) {
            let row = selection[i]
            let index = this.reportConfigList.findIndex(x => x.tempId == row.id)
            if (index == -1) {
              maxLength++
              reportConfigs.push({
                reportGroupId: this.groupForm.id,
                orderNum: maxLength,
                tempId: row.id
              })
            }
          }
          if (reportConfigs.length > 0) {
            addReportConfig({reportConfigs: reportConfigs}).then(res => {
              this.getList()
              this.msgSuccess("添加模板成功")
            })
          }
        }
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id;
        this.$confirm('是否确认移除报表配置名称为"' + row.tmpName + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delReportConfig(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("移除成功");
        }).catch(() => {
        });
      },
      changeRow(row) {
        updateReportConfig(row).then(res => {
        })
      },
      handlePreviwTemp(row) {
        previwTemp(row.tempId).then(e => {
          var open = window.open();
          open.location = e;
        });
      },
    },
    props: {
      groupForm: {
        type: Object,
        default: () => {
        }
      },
    }
  };
</script>
